Content-type: text/html

<html>
<head>
<title>Finalize Your Order</title>
<script type="text/javascript"><!-- hide from old browsers
function validate_order (form) {
    var alertstr = '';
    var invalid  = 0;
    var invalid_fields = new Array();

    // skip validation if they clicked "Cancel"
    if (form._submit.value == 'Cancel') return true;
    // first_name: standard text, hidden, password, or textarea box
    var first_name = form.elements['first_name'].value;
    if (first_name == null || first_name === "") {
        alertstr += '- Invalid entry for the "First Name" field\n';
        invalid++;
        invalid_fields.push('first_name');
    }
    // last_name: standard text, hidden, password, or textarea box
    var last_name = form.elements['last_name'].value;
    if (last_name == null || last_name === "") {
        alertstr += '- Invalid entry for the "Last Name" field\n';
        invalid++;
        invalid_fields.push('last_name');
    }
    // email: standard text, hidden, password, or textarea box
    var email = form.elements['email'].value;
    if (email == null || ! email.match(/^[\w\-\+\._]+\@[a-zA-Z0-9][-a-zA-Z0-9\.]*\.[a-zA-Z]+$/)) {
        alertstr += '- Invalid entry for the "Email" field\n';
        invalid++;
        invalid_fields.push('email');
    }
    // send_me_emails: radio group or multiple checkboxes
    var send_me_emails = null;
    var selected_send_me_emails = 0;
    for (var loop = 0; loop < form.elements['send_me_emails'].length; loop++) {
        if (form.elements['send_me_emails'][loop].checked) {
            send_me_emails = form.elements['send_me_emails'][loop].value;
            selected_send_me_emails++;
            if (send_me_emails == null || send_me_emails === "") {
                alertstr += '- Choose one of the "Send Me Emails" options\n';
                invalid++;
                invalid_fields.push('send_me_emails');
            }
        } // if
    } // for send_me_emails
    if (! selected_send_me_emails) {
        alertstr += '- Choose one of the "Send Me Emails" options\n';
        invalid++;
    }

    // address: standard text, hidden, password, or textarea box
    var address = form.elements['address'].value;
    if (address == null || address === "") {
        alertstr += '- Invalid entry for the "Address" field\n';
        invalid++;
        invalid_fields.push('address');
    }
    // state: select list, always assume it's multiple to get all values
    var state = null;
    var selected_state = 0;
    for (var loop = 0; loop < form.elements['state'].options.length; loop++) {
        if (form.elements['state'].options[loop].selected) {
            state = form.elements['state'].options[loop].value;
            selected_state++;
            if (state == null || state === "") {
                alertstr += '- Select an option from the "State" list\n';
                invalid++;
                invalid_fields.push('state');
            }
        } // if
    } // for state
    if (! selected_state) {
        alertstr += '- Select an option from the "State" list\n';
        invalid++;
    }

    // zipcode: standard text, hidden, password, or textarea box
    var zipcode = form.elements['zipcode'].value;
    if (zipcode == null || ! zipcode.match(/^\d{5}$|^\d{5}\-\d{4}$/)) {
        alertstr += '- Invalid entry for the "Zipcode" field\n';
        invalid++;
        invalid_fields.push('zipcode');
    }
    // credit_card: standard text, hidden, password, or textarea box
    var credit_card = form.elements['credit_card'].value;
    if (credit_card == null || ! credit_card.match(/^\d{4}[\- ]?\d{4}[\- ]?\d{4}[\- ]?\d{4}$|^\d{4}[\- ]?\d{6}[\- ]?\d{5}$/)) {
        alertstr += '- Invalid entry for the "Credit Card" field\n';
        invalid++;
        invalid_fields.push('credit_card');
    }
    // expiration: standard text, hidden, password, or textarea box
    var expiration = form.elements['expiration'].value;
    if (expiration == null || ! expiration.match(/^(0?[1-9]|1[0-2])\/?[0-9]{2}$/)) {
        alertstr += '- Invalid entry for the "Expiration" field\n';
        invalid++;
        invalid_fields.push('expiration');
    }
    if (invalid > 0 || alertstr != '') {
        if (! invalid) invalid = 'The following';   // catch for programmer error
        alert(''+invalid+' error(s) were encountered with your submission:'+'\n\n'
                +alertstr+'\n'+'Please correct these fields and try again.');
        return false;
    }
    return true;  // all checked ok
}
//-->
</script>
</head>
<body>
<h3>Finalize Your Order</h3>
<noscript><span class="shop_invalid">Please enable Javascript or use a newer browser.</span></noscript>
<p>Fields that are <span class="shop_required">highlighted</span> are required.</p>
<form action="TEST" class="shop_form" id="order" method="post" name="order" onsubmit="return validate_order(this);">
<div class="shop_state" id="order_state"><input id="_submitted_order" name="_submitted_order" type="hidden" value="1" />
<input id="_submit_order" name="_submit_order" type="hidden" /></div>
<table class="shop" id="order_body">
<tr id="order_first_name_row">
  <td class="shop_label" id="order_first_name_label"><span class="shop_required">First Name</span></td>
  <td class="shop_field" id="order_first_name_field"><input class="shop_input" id="first_name" name="first_name" type="text" /></td>
</tr>
<tr id="order_last_name_row">
  <td class="shop_label" id="order_last_name_label"><span class="shop_required">Last Name</span></td>
  <td class="shop_field" id="order_last_name_field"><input class="shop_input" id="last_name" name="last_name" type="text" /></td>
</tr>
<tr id="order_email_row">
  <td class="shop_label" id="order_email_label"><span class="shop_required">Email</span></td>
  <td class="shop_field" id="order_email_field"><input class="shop_input" id="email" name="email" type="text" value="pete@peteson.com" /></td>
</tr>
<tr id="order_send_me_emails_row">
  <td class="shop_label" id="order_send_me_emails_label"><span class="shop_required">Send Me Emails</span></td>
  <td class="shop_field" id="order_send_me_emails_field"><table class="shop_columns">
  <tr>
    <td><input class="shop_radio" id="send_me_emails_1" name="send_me_emails" type="radio" value="1" /></td>
    <td><label class="shop_option" for="send_me_emails_1">Yes</label></td>
  </tr>
  <tr>
    <td><input checked="checked" class="shop_radio" id="send_me_emails_0" name="send_me_emails" type="radio" value="0" /></td>
    <td><label class="shop_option" for="send_me_emails_0">No</label></td>
  </tr>
  </table></td>
</tr>
<tr id="order_address_row">
  <td class="shop_label" id="order_address_label"><span class="shop_required">Address</span></td>
  <td class="shop_field" id="order_address_field"><input class="shop_input" id="address" name="address" type="text" /></td>
</tr>
<tr id="order_state_row">
  <td class="shop_label" id="order_state_label"><span class="shop_required">State</span></td>
  <td class="shop_field" id="order_state_field"><select class="shop_select" id="state" name="state">
  <option value="">-select-</option>
  <option value="DJ">DJ</option>
  <option value="EE">EE</option>
  <option value="HI">HI</option>
  <option value="IW">IW</option>
  <option value="JS">JS</option>
  <option value="JS">JS</option>
  <option value="KS">KS</option>
  <option value="NK">NK</option>
  <option value="TY">TY</option>
  <option value="UR">UR</option>
  <option value="UW">UW</option>
  <option value="YK">YK</option>
  </select></td>
</tr>
<tr id="order_zipcode_row">
  <td class="shop_label" id="order_zipcode_label"><span class="shop_required">Zipcode</span></td>
  <td class="shop_field" id="order_zipcode_field"><input class="shop_input" id="zipcode" name="zipcode" type="text" /></td>
</tr>
<tr id="order_credit_card_row">
  <td class="shop_label" id="order_credit_card_label"><span class="shop_required">Credit Card</span></td>
  <td class="shop_field" id="order_credit_card_field"><input class="shop_input" id="credit_card" name="credit_card" type="text" /></td>
</tr>
<tr id="order_expiration_row">
  <td class="shop_label" id="order_expiration_label"><span class="shop_required">Expiration</span></td>
  <td class="shop_field" id="order_expiration_field"><input class="shop_input" id="expiration" name="expiration" type="text" /></td>
</tr>
<tr id="order_submit_row">
  <td class="shop_submit" colspan="2" id="order_submit_field"><input class="shop_button" onclick="document.getElementById('_submit_order').value = this.value;" type="submit" value="Place Order" /><input class="shop_button" onclick="document.getElementById('_submit_order').value = this.value;" type="submit" value="Cancel" /></td>
</tr>
</table>
</form>
</body>
</html>
